<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt Optimizer - AI提示词优化工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            margin-top: -0.2rem;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        .section-divider {
            height: 2px;
            background: linear-gradient(to right, transparent, #667eea, transparent);
            margin: 3rem 0;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight">
                Prompt Optimizer
            </h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90 font-light">
                让 AI 对话更精准，让创意更高效
            </p>
            <div class="flex flex-col md:flex-row gap-4 justify-center items-center">
                <a href="https://github.com/linshenkx/prompt-optimizer" target="_blank" class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-all inline-flex items-center gap-2">
                    <i class="fab fa-github"></i>
                    访问 GitHub
                </a>
                <div class="text-lg opacity-80">
                    <i class="fas fa-code-branch"></i> 开源免费
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-6 py-12">
        <!-- Introduction -->
        <section class="bg-white rounded-2xl shadow-xl p-8 md:p-12 mb-12">
            <p class="text-lg leading-relaxed text-gray-700">
                <span class="drop-cap">P</span>rompt Optimizer 是一款专为 AI 开发者、内容创作者及产品经理设计的开源提示词优化工具。它旨在帮助用户系统性地提升大语言模型（如 GPT、Claude 等）的提示词（Prompt）质量，从而获得更精准、更高效的 AI 输出。无论你是 AI 应用开发者，还是希望提升 AI 内容生成质量的个人用户，Prompt Optimizer 都能为你的工作流程带来显著提升。
            </p>
        </section>

        <!-- Problem Section -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 flex items-center gap-3">
                <i class="fas fa-puzzle-piece feature-icon"></i>
                它能解决什么问题
            </h2>
            <div class="bg-white rounded-2xl shadow-lg p-8">
                <p class="text-gray-700 mb-6">在实际使用大语言模型时，许多用户常常遇到以下痛点：</p>
                <div class="grid md:grid-cols-2 gap-4">
                    <div class="flex items-start gap-3 p-4 bg-purple-50 rounded-lg">
                        <i class="fas fa-exclamation-circle text-purple-600 mt-1"></i>
                        <span class="text-gray-700">提示词难以系统优化，输出结果不稳定</span>
                    </div>
                    <div class="flex items-start gap-3 p-4 bg-purple-50 rounded-lg">
                        <i class="fas fa-clock text-purple-600 mt-1"></i>
                        <span class="text-gray-700">不同场景下需要频繁调整 Prompt，效率低下</span>
                    </div>
                    <div class="flex items-start gap-3 p-4 bg-purple-50 rounded-lg">
                        <i class="fas fa-chart-line text-purple-600 mt-1"></i>
                        <span class="text-gray-700">缺乏科学的 Prompt 评估与对比手段</span>
                    </div>
                    <div class="flex items-start gap-3 p-4 bg-purple-50 rounded-lg">
                        <i class="fas fa-hand-paper text-purple-600 mt-1"></i>
                        <span class="text-gray-700">传统手动调优方式耗时耗力，难以复用</span>
                    </div>
                </div>
                <p class="text-gray-700 mt-6 text-lg">
                    Prompt Optimizer 通过自动化、可视化的方式，帮助用户高效管理、优化和评估提示词，极大提升 AI 应用开发与内容生成的效率和质量。
                </p>
            </div>
        </section>

        <div class="section-divider"></div>

        <!-- Core Features -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 flex items-center gap-3">
                <i class="fas fa-star feature-icon"></i>
                核心功能概述
            </h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-4xl mb-4 text-purple-600">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">批量提示词测试与对比</h3>
                    <p class="text-gray-600">支持一次性对多个 Prompt 进行批量测试，快速对比不同提示词的效果，节省大量人工调优时间。</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-4xl mb-4 text-purple-600">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">多模型支持</h3>
                    <p class="text-gray-600">可同时对接多种主流大语言模型（如 OpenAI、Claude 等），便于横向评测和选择最优模型。</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-4xl mb-4 text-purple-600">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">可视化结果分析</h3>
                    <p class="text-gray-600">通过直观的界面展示各 Prompt 的输出结果，支持多维度对比和筛选，帮助用户快速定位最佳方案。</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-4xl mb-4 text-purple-600">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">Prompt 管理与版本控制</h3>
                    <p class="text-gray-600">内置提示词管理功能，支持版本追踪和历史回溯，方便团队协作和知识积累。</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-4xl mb-4 text-purple-600">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">自动化评测与评分</h3>
                    <p class="text-gray-600">集成自动化评测机制，可根据自定义标准对输出结果进行打分，提升评估的客观性和一致性。</p>
                </div>
            </div>
        </section>

        <!-- Visualization -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 flex items-center gap-3">
                <i class="fas fa-project-diagram feature-icon"></i>
                工作流程可视化
            </h2>
            <div class="bg-white rounded-2xl shadow-lg p-8">
                <div class="mermaid">
                    graph LR
                        A[输入多个Prompt] --> B[批量测试]
                        B --> C[多模型运行]
                        C --> D[结果收集]
                        D --> E[可视化对比]
                        E --> F[评分与筛选]
                        F --> G[保存最优方案]
                        G --> H[版本管理]
                        
                        style A fill:#667eea,stroke:#fff,color:#fff
                        style G fill:#764ba2,stroke:#fff,color:#fff
                </div>
            </div>
        </section>

        <div class="section-divider"></div>

        <!-- Use Cases -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 flex items-center gap-3">
                <i class="fas fa-lightbulb feature-icon"></i>
                使用场景
            </h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl p-6">
                    <div class="text-3xl mb-4 text-purple-700">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">AI 产品开发</h3>
                    <p class="text-gray-700">开发者在设计 AI 对话、内容生成等功能时，可用 Prompt Optimizer 批量测试不同提示词，快速找到最优方案。</p>
                </div>
                <div class="bg-gradient-to-br from-blue-100 to-cyan-100 rounded-xl p-6">
                    <div class="text-3xl mb-4 text-blue-700">
                        <i class="fas fa-pen-fancy"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">内容创作与运营</h3>
                    <p class="text-gray-700">内容团队可用其优化 AI 写作、摘要、翻译等任务的提示词，提升内容质量和一致性。</p>
                </div>
                <div class="bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl p-6">
                    <div class="text-3xl mb-4 text-green-700">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">教育与研究</h3>
                    <p class="text-gray-700">教师或研究者可用其进行 Prompt 工程教学、论文实验，系统性分析不同 Prompt 对模型输出的影响。</p>
                </div>
            </div>
        </section>

        <!-- Think Box -->
        <section class="mb-12">
            <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
                <div class="flex items-start gap-4">
                    <i class="fas fa-brain text-4xl float-animation"></i>
                    <div>
                        <h3 class="text-2xl font-bold mb-3">思考时刻</h3>
                        <p class="text-lg">